<template>
<div v-if="goodsDetail" class="container gd-wrap">
    
    <div class="row wrapper" ref="wrapper5">
        <div class="row content">
            <div class="row gd-imgWrap">
                <img :src="goodsDetail.img" alt="">
                
            </div>
            <p class="contain">
                {{goodsDetail.title}}
            </p>
            <div class="contain gd-price">
                <div class="gd-currentPriceWrap">
                    <span class="gd-priceIcon">￥</span>
                    <span class="gd-currentPrice">{{goodsDetail.price}}</span>
                </div>
                    

                    <div class="gd-orgPriceWrap">
                        <del class="gd-orgPrice">￥{{goodsDetail.orgPrice}}</del>
                        <br>
                        <span class="gd-discount">{{discount}} 折</span>
                    </div>
                
            </div>

            <!-- 买家评论    -->
            <div class="contain gd-commend">
                <div class="row gd-count">
                    <span>
                        <span>买家评价 {{totalComments}}</span>
                        <span v-if="goodsDetail.sale">| 销量 {{goodsDetail.sale}}</span> 
                    </span>
                    <i class="iconfont">&#xe62f;</i>
                </div>
                <div class="row gd-commendList">
                    <div v-if="commentList.length===0" class="gd-Nocommend">
                        暂无评论
                    </div>
                    <!-- 循环评论 -->
                    <div v-for="(v,i) of commentList.slice(0,2)" :key="'commentList'+i" class="gd-commendWrap">
                        <!-- 头像信息 -->
                        <div class="gd-commendUser">
                            <img :src="v.user.avatar" alt=""> <span>{{v.user.uname}}</span>
                        </div>
                        <div class="gd-commendContent">
                            <div class="gd-commendOne">
                                {{v.content}}
                                <div v-if="v.images.length!==0">
                                    <img v-for="(imgV,imgI) of v.images" :key="'v.images'+imgI" :src="imgV" alt="">
                                </div>
                            </div>
                            <!-- 追评 -->
                            <div v-if="v.append" class="gd-commendTwo">
                                {{v.append.content}}
                                
                                <div v-if="v.append.images.length!==0">
                                    <img v-for="(imgV,imgI) of v.append.images" :key="'v.images'+imgI" :src="imgV" alt="">
                                </div>
                            </div>
                            <p class="gd-commentTime">
                                {{v.time}}
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>   
    </div>  
    <i class="iconfont" @click="doBack()">&#xe62f;</i>
    <GoodsDetailBottom :addCartGoods="goodsDetail"></GoodsDetailBottom>
</div>
  
</template>

<script>
import Bscroll from "better-scroll"

import GoodsDetailBottom from "./GoodsDetailBottom"

export default {
    components:{
        GoodsDetailBottom
    },
    computed:{
       goodsDetail(){
           return this.$store.getters.goodsDetail;
       },
        //折扣
       discount(){
           return parseInt((this.goodsDetail.price/this.goodsDetail.orgPrice)*10);
       },
       commentList(){
           return this.$store.getters.goodsCommentList.list;
       },
       totalComments(){
           return this.$store.getters.goodsCommentList.total;
       }
    },
    mounted(){
        this.bscrollInit();
        this.$store.dispatch("loadGoodsCommentList",{itemId:this.$route.params.itemId})
    },
    methods: {
        doBack(){
            // this.$store.commit("setGoodsDetail",null);
            this.$router.go(-1);
        },
        bscrollInit() {
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new Bscroll(this.$refs.wrapper5, {
                        click: true
                    });
                } else {
                    this.scroll.refresh();
                }
            });
        }
    }
  
}
</script>

<style lang="less">
.gd-wrap{
    position: absolute;
    top:0;
    bottom:0.8rem;
    background-color: #fff;
    >.wrapper{
        height:100%;
        >.content{
            >.gd-imgWrap{
                position: relative;
                >img{
                    width:100%
                }
                
            }
            >p{
                font-size: 0.27rem;
                margin-top:0.2rem;
            }
            >.gd-price{
                @font:0.2rem;
                @font2:0.6rem;
                >.gd-currentPriceWrap{
                    display: inline-block;
                    font-size: 0;
                    >.gd-priceIcon{
                        font-size: @font;
                        display: inline-block;
                        margin-top:0.15rem;
                        vertical-align: top;
                    }
                    >.gd-currentPrice{
                        font-size:@font2;
                    }
                }
                >.gd-orgPriceWrap{
                    display: inline-block;
                    >.gd-orgPrice{
                        display: inline-block;
                        // margin-top:0.09rem;
                        font-size: @font;
                        color:#aaa;
                    }
                    >.gd-discount{
                        display: inline-block;
                        // vertical-align: bottom;
                        font-size: @font;
                        margin-top: 0rem;
                        background-color: rgb(255, 232, 238);
                        color: rgb(255, 34, 85);
                        padding:0 0.1rem;
                    }
                }
            }
            >.gd-commend{
                margin-top:0.2rem;
                border-top:1px solid #ccc;
                >.gd-count{
                    color:#aaa;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height:0.8rem;
                    border-bottom:1px solid #eee;
                    >i{
                        transform: rotate(180deg)
                    }
                }
                >.gd-commendList{

                    >.gd-commendWrap{
                        border-bottom:1px solid #eee;
                        >.gd-commendUser{
                            display: flex;
                            align-items: center;
                            margin-top:0.2rem;
                            >img{
                                border-radius: 50%;
                                width:0.6rem;
                            }
                            >span{
                                font-size: 0.28rem;
                            }
                        }
                        >.gd-commendContent{
                            color: #777;
                            margin:0.3rem 0 0;
                            .gd-commentTime{
                                color:#999;
                            }
                            img{
                                width:0.8rem;
                                margin-right:0.1rem;
                            }
                            >.gd-commendOne{
                                >div{
                                    margin:0.1rem 0 0.1rem;
                                }
                            }
                            >.gd-commendTwo{
                                >div{

                                    margin:0.05rem 0 0.3rem;
                                }
                                
                            }

                        }
                    }
                }
            }
        }
    }
    >i{
        @length:0.4rem;
        position: fixed;
        top:0.2rem;
        left:0.2rem;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.3);
        display: inline-block;
        width:@length;
        height:@length;
        line-height: @length;
        text-align: center;
        font-weight:800;
        color:#eee;  
    }
}

</style>
